<template>
    <div>
        <!--        路由-->
        <keep-alive>
            <router-view/>
        </keep-alive>
        <!--       底部tabBar -->
        <van-tabbar class="nav-button" v-model="active" active-color="#FF6800" route>
            <van-tabbar-item replace to="/" name="/">
                <img v-if="active === '/'" src="../../public/img/home-active.png" alt="">
                <img v-if="active !== '/'" src="../../public/img/home.png" alt="">
                <br>
                首页
            </van-tabbar-item>
            <van-tabbar-item replace to="/about" name="/about">
                <img v-if="active === '/about'" src="../../public/img/course-active.png" alt="">
                <img v-if="active !== '/about'" src="../../public/img/course.png" alt="">
                <br>
                课程
            </van-tabbar-item>
            <van-tabbar-item replace to="/study" name="/study">
                <img v-if="active === '/study'" src="../../public/img/study-active.png" alt="">
                <img v-if="active !== '/study'" src="../../public/img/study.png" alt="">
                <br>
                约课记录
            </van-tabbar-item>
            <van-tabbar-item replace to="/lx" name="/lx">
                <img v-if="active === '/lx'" src="../../public/img/lx-active.png" alt="">
                <img v-if="active !== '/lx'" src="../../public/img/lx.png" alt="">
                <br>
                练习
            </van-tabbar-item>
            <van-tabbar-item replace to="/user" name="/user">
                <img v-if="active === '/user'" src="../../public/img/user-active.png" alt="">
                <img v-if="active !== '/user'" src="../../public/img/user.png" alt="">
                <br>
                我的
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                active: this.$route.path || '/',
            }
        },
        mounted() {
        }
    }
</script>

<style scoped lang="scss">
    .nav-button {
        width: 100%;
        height: 100px;
        z-index: 999999;
    }

    .van-tabbar-item {
        text-align: center;
        font-size: 23px;

        img {
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
        }
    }
</style>